<template>
	<view class="open-invoice">
		<view class="invoice-list">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="invoice-item w-center" v-for="(item,index) in list"
					@click="toInvoice(item)"
					:key="index">
				<!-- <view class="invoice-item w-center" v-for="(item,index) in list" :key="index"> -->
					<view class="i-box">
						<view class="invoice-title">
							<radio v-if="item.is_invoice == 0" :checked="isChecked(item.id)"
								style="transform: scale(.8);flex-shrink: 0;margin-right: 8rpx;" color="#F12F63" />
							<text>{{item.num}}L {{item.oil_name}} {{item.station_name}}</text>
						</view>
						<view class="time-money df df-justify-content-between df-align-items">
							<text>{{item.createtime}}</text>
							<view class="">￥{{item.total}}</view>
						</view>
					</view>
					<view class="open-ince" v-if="item.is_invoice == 0">可开票</view>
					<view class="open-ince" v-if="item.is_invoice == 1">已提交</view>
					<view class="open-ince" v-if="item.is_invoice == 2">处理中</view>
				</view>
				<mescroll-empty v-if="list.length==0"></mescroll-empty>
			</mescroll-body>
		</view>
		<view class="" style="height: 150rpx;"></view>
		<view class="submit-box df df-justify-content-alin" style="z-index: 99;" v-if="checkedList.length>0">
		<!-- <view class="submit-box df df-justify-content-alin" style="z-index: 99;" v-if="showBtn"> -->
			<view class="submit-btn" @click="goOpenInvice()" hover-class="btn-hover">去开票</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import api from '@/api/order.js';
	// true：页面首次加载
	let firstStart = true;
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
				},
				upOption: {
					use: true,
					// auto: false,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: 200 // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					empty: {
						use: true, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					}
				},
				list: [],
				checkedList:[]
			}
		},
		onLoad() {
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
		},
		computed:{
			isChecked(){   // 判断当前发票是否选中
				return function(id){
					return this.checkedList.some(item => {
						return item.id*1 === id*1;
					});
				};
			},
			totalPrice(){
				if(this.checkedList.length>0){
					let total = 0;
					this.checkedList.forEach(ele=>{
						total += (ele.total * 1);
					});
					return Number(total).toFixed(2);
				}else{
					return 0;
				};
			},
			showBtn(){
				if(this.list.length > 0){
					return this.list.some( item => {
						return item.is_invoice*1 === 0;
					});
				}else{
					return false;
				};
			}
		},
		onShow() {
			/* 
			 * 页面首次加载， mescroll-body 组件默认执行一次
			 * downCallback() 方法，阻止 onshow 在页面首次加载执行
			 */
			if(firstStart){
				firstStart = false;
			}else{
				this.checkedList = [];
				this.mescroll&&this.mescroll.resetUpScroll();
			};
		},
		onUnload() {
			/* 页面卸载，微信小程序不清除全局变量，重新赋值 */
			firstStart = true;
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				let _this = this;
				//联网加载数据
				api.getInvoiceList({
					page: page.num,
					status: 1,
				}).then(curPageData => {
					if(curPageData.code === 0 && curPageData.msg === '暂无数据' && page.num === 1){
						_this.mescroll.endBySize([], 0);
						return;
					};
					_this.mescroll.endBySize(curPageData.data.data, curPageData.data.total)
					//设置列表数据
					if (page.num == 1) _this.list = [];
					_this.list = _this.list.concat(curPageData.data.data);
					_this.payTotal = curPageData.data.payTotal; //累计加油消费
					_this.disTotal = curPageData.data.disTotal; //累计总优惠
					_this.cycleTotal = curPageData.data.cycleTotal; //累计中期加油消费
				}).catch((e) => {
					console.log(e);
					this.mescroll.endErr();
				});
			},
			// 选择开票订单
			toInvoice(item){
				// 过滤可开票订单
				if(item.is_invoice*1 !== 0)return;
				if(this.isChecked(item.id)){
					let ii = null;
					this.checkedList.forEach((ele,index)=>{
						if(ele.id*1 === item.id*1){
							ii = index;
						};
					});
					this.checkedList.splice(ii,1);
				}else{
					this.$set(this.checkedList,this.checkedList.length,item);
				};
			},
			// 去开票
			goOpenInvice(){
				// this.checkedList = [];
				/** 
				 *  将 未开票发票 过滤出来
				 *  总金额小于9999
				 */
				// this.checkedList 可开票发票数组
				let that = this;
				/* let totalMoney = 0;
				this.list.forEach((item, index) => {
					let currentTotal = totalMoney * 1 + item.total * 1;
					if (item.is_invoice * 1 === 0 && currentTotal <= 9999) {
						totalMoney += (item.total * 1);
						this.checkedList.push(item);
					};
				}); */
				uni.showModal({
					content: `你本次选择的待开票订单${that.checkedList.length}个，总金额为${that.totalPrice}元`,
					// #ifndef MP-ALIPAY
					confirmColor: "#F12F63",
					// #endif
					success(res) {
						if(res.confirm){
							let ids = "";
							let intros = {};
							that.checkedList.forEach((ele,ii)=>{
								if(ii !== that.checkedList.length-1){
									ids += (ele.id+',');
								}else{
									ids += ele.id;
								};
								if(!intros[ele.oil_name]){
									intros[ele.oil_name] = ele.num*1;
								}else{
									intros[ele.oil_name] += (ele.num*1);
								};
							});
							let intro = "";
							Object.keys(intros).forEach(ele=>{
								intro += (ele + '汽油，数量：' + (Number(intros[ele]).toFixed(2)));
							});
							that.$navigateTo('/pages/mine/open-invoice/invoice-detail?id='+ids+'&money='+that.totalPrice+'&intro='+intro);
						};
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background: #F5F5F5FF;
	}
</style>
<style lang="scss" scoped>
	.open-invoice {
		.invoice-list {
			padding-top: 30rpx;

			.invoice-item {
				// height: 240rpx;
				margin-bottom: 40rpx;
				background: #FFFFFF;
				padding-top: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				.i-box {
					padding: 0 30rpx 18rpx 30rpx;
					border-bottom: 1px solid #EEEEEEFF;

					.invoice-title {
						display: flex;
						align-items: center;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #1E1E20;
					}

					.time-money {
						padding-top: 20rpx;

						text {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #B1B1B1;
						}

						view {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}

				.open-ince {
					height: 102rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #6D6D6D;
					line-height: 102rpx;
					padding-left: 30rpx;
				}
			}
		}
		
		.submit-box {
			width: 100%;
			// height: 128rpx;
			bottom: 0;
			background: #fff;
			position: fixed;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		
			.submit-btn {
				// width: 360rpx;
				width: 100%;
				height: 88rpx;
				background: #F12F63;
				// border-radius: 60rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
		
				&.btn-hover {
					background-color: rgba(241, 47, 99, 0.7);
				}
			}
		}
	}
</style>
